<template>
  <div>
    <vm-cell :has-arrow="false"
             :has-top-border="true"
             :show-title="false"
             style="margin-top: 20px;"
             @cellClicked="clickPhone">
      <div class="cell-item"
           title-align="left">
        <text class="icon icon-sm text-primary">&#xe613;</text>
        <text>客服电话：{{phone}}</text>
      </div>
    </vm-cell>
    <vm-cell :has-arrow="true"
             :has-margin="true"
             :show-title="false"
             @cellClicked="clickFeedback">
      <div class="cell-item"
           title-align="left">
        <text class="icon icon-sm text-primary">&#xe785;</text>
        <text>反馈中心</text>
      </div>
    </vm-cell>

    <vm-cell :has-arrow="false"
             :show-title="false"
             :has-top-border="true">
      <div class="cell-item"
           title-align="left">
        <text class="icon icon-sm text-accent">&#xe782;</text>
        <text>热点问题</text>
      </div>
    </vm-cell>

    <div class="q-list"
         v-for="(q, index) in questions"
         :key="index"
         @click="toggleOpen(index)">
      <div class="q-list-title">
        <text class="icon text-muted mr-1"
              v-if="!q.open">&#xe605;</text>
        <text class="icon text-muted mr-1"
              v-else>&#xe604;</text>
        <text>{{q.question}}</text>
      </div>
      <text class="q-list-answer"
            v-if="q.open">{{q.answer}}</text>
    </div>
  </div>
</template>
<script>
import VmCell from '../../components/vm-cell.vue'

export default {
  components: {
    VmCell
  },
  props: {},
  data() {
    return {
      phone: '0851-84715359',
      questions: [
        {
          question: '怎么注册用户?',
          answer: '通过下载农担老乡注册用户，注册后可以浏览其他农场信息，也可以加入、管理其他人的农场。当然，您也可以自己申请建立农场，并添加员工、股东等雇员，管理农场动态、生产计划、雇员收益等。',
          open: false        },
        {
          question: '为什么注册要用手机?',
          answer: '为了确保是您本人在注册农担农场主帐号，避免他人盗用您的手机信息注册，而影响您的正常使用。',
          open: false        },
        {
          question: '我忘记密码了?',
          answer: '如果您的手机可以正常使用，请自助找回；否则请帐号申诉，我们会在2个工作日内给您反馈，申诉过程不影响您的正常登录和使用。',
          open: false        },
        {
          question: '如何建立农场?',
          answer: '登录后点击创建农场按钮，根据提示建立农场。',
          open: false        },
        {
          question: '建立农场为什么要进行实名认证?',
          answer: '实名认证将使您可以享受更多服务（如农场溯源、产品认证），并影响到您的农场评级。',
          open: false        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    clickPhone() {
      this.$coms.call(this.phone, false)
    },
    clickFeedback() {
      this.$nav.open({ name: 'user.help.feedback' })
    },
    toggleOpen(index) {
      this.questions[index].open = !this.questions[index].open
    }
  }
}
</script>
<style lang="scss" scoped>
@import "../../css/variables.scss";

.icon {
  font-family: alicon;
}
.cell-item {
  flex-direction: row;
  flex: 1;
  align-items: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.icon-sm {
  font-size: 40px;
  margin-right: 20px;
}
.text-primary {
  color: $primary;
}
.text-accent {
  color: $accent;
}
.text-muted {
  color: #999;
}
.mr-1 {
  margin-right: 10px;
}

.q-list {
  padding-left: 20px;
  background-color: #fff;
  border-bottom-color: $border-color;
  border-bottom-width: 1px;
}
.q-list-title {
  flex-direction: row;
  padding: 25px;
  align-items: center;
}
.q-list-answer {
  padding-left: 50px;
  padding-right: 25px;
  padding-bottom: 25px;
  color: #666;
  font-size: 28px;
}
</style>
